<template>
    <el-dialog class="ui-return-sales-dialog" v-model="dialogVisible" title="退货" @opened="init" @closed="finalThings">
        <div class="spacing box-row">
            <el-date-picker 
                type="datetimerange" 
                value-format="X" 
                :editable="false" 
                v-model="params.range" 
                range-separator="至" 
                start-placeholder="开始日期" 
                end-placeholder="结束日期" 
                :clearable="false"
                :shortcuts="timeshortcuts"
                style="max-width: 25rem;"
                @change="onRangeChanged"
            ></el-date-picker>
            <el-form-item label="商品名称:" style="max-width: 15rem;margin: 0 .5rem;">
                <el-input v-model="params.name"></el-input>
            </el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
        </div>
        <div class="spacing">
            <el-table :data="data" size="small" highlight-current-row :height="400" border>
                <el-table-column prop="order_no" label="订单号"></el-table-column>
                <el-table-column label="时间" width="140" prop="createtime" :formatter="dateFormatter"></el-table-column>
                <el-table-column prop="realpay" :formatter="rmbFormatter" label="金额" width="120"></el-table-column>
                <el-table-column prop="settle_mode" label="支付方式" align="center" :width="80">
                    <template #default="{row}">
                        <span :class="['el-tag', 'el-tag--light', 'el-tag--' + smD[row.settle_mode].theme]">
                            <span class="el-tag__content">{{ smD[row.settle_mode].text }}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" :width="96">
                    <template #default="{row}">
                        <el-text v-if="row.refund == row.amount" type="danger" size="small">已全额退款</el-text>
                        <el-button v-else size="small" type="primary" @click="onReturnSales(row)">退货</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="ui-pagination-ctn box-row">
            <div style="flex:1"></div>
            <el-pagination
                v-model:current-page="params.page" :page-size="params.limit" :page-sizes="[19, 50, 100, 200]"
                layout="sizes, total, prev, pager, next" :total="total" 
                @size-change="onPageSizeChanged" @current-change="onCurrentPageChanged"
            ></el-pagination>
        </div>
    </el-dialog>
</template>
<script>
import { reactive, toRefs,computed } from 'vue'
import { timeShortcuts,dateFormat,smD,rmbFormat } from '../../uiframe/utils';
import { useSocket } from '../../uiframe/services/socket';
import OrderReturnSalesDialog from './OrderReturnSalesDialog.vue'
import { UiShowDialog } from '../../uiframe/layout/components/CompFactory.vue';

export default {
    props:{
        q:Object,
        done: Function,
        _compId: Number,
    },
    setup(props)
    {
        let data = reactive({
            data:[],
            total:0,
            dialogVisible: true,
            form:null,
            params:{
                range:timeShortcuts(['cd'])[0].value.map(v=>Math.floor(v / 1000)),
                scene:-1,
                document_type:-1,
                settle_mode:-1,
                stage:-1,
                page:1,
                limit:19,
            },
            timeshortcuts:computed(()=>{
                return timeShortcuts(['cd', 'pd'])
            }),
            smD:smD
        }),
        onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) },
        load = ()=>{
            data.loading = true;
            useSocket().then(socket=>socket.rpc('order.read', data.params).then(({success, message, data:res})=>{
                data.loading = false;
                if(!success) return onmessage({success, message});
                data.total = res.total;
                data.data = res.data;
            }).catch(onmessage));
        };

        const methods = {
            onRangeChanged:(v)=>{data.params.range = data.params.range.map(v=>parseInt(v))},
            onCancel : ()=>{
                data.dialogVisible = false;
            },
            finalThings: () =>{
                useSocket().then(socket=>socket.unbind('return-sales-dlg'))
                props.done()
            },
            init:()=>{
                useSocket().then(socket=>{
                    socket.watchSync('return-sales-dlg', [{
                        'GoodsOrder':((n, s)=>n == 'up'), _get:true
                    }],({GoodsOrder})=>{
                        if(GoodsOrder){
                            data.data.forEach(v=>{
                                if(v.id == GoodsOrder.id){
                                    v = Object.assign(v, GoodsOrder);
                                }
                            })
                        }
                    })
                })
            },
            onSure:()=>{
                
            },
            onSearch:()=>load(),
            onCurrentPageChanged:(page)=>{
                data.query.page = page;
                methods.onSearch();
            },
            onPageSizeChanged:(limit)=>{
                data.query.limit = limit;
                methods.onSearch();
            },
            onReturnSales:(r)=>{
                useSocket().then(socket=>socket.rpc('order.detail',{id:r.id}).then(res=>{
                    UiShowDialog(OrderReturnSalesDialog,{payload:res.data}).then(res=>{

                    }).catch(res=>{

                    })
                }).catch(res=>onmessage(res)));
            }
        },
        formatter = {
            dateFormatter:(r,c,v)=>dateFormat(v, 'Y-M-D h:m'),
            rmbFormatter:(r,c,v)=>rmbFormat(v,2)
        }

        load();
        return {
            ...toRefs(data),
            ...methods,
            ...formatter
        }
    }
}
</script>

<style lang="scss">
.ui-return-sales-dialog{
    width: 45rem;
    max-width: 45rem;
    min-width: 45rem;
    margin-top: 5rem;
    .el-dialog__body{
        padding: 15px 20px;
        .spacing{
            padding-bottom: 10px;
        }
    }
}
</style>